<template>
    <div class="inputNumber" :class="[classStyle]">
        <el-input-number v-model="minNum" controls-position="right" size="mini" placeholder='最小值' :min="0" 
            @change="numChange(minNum,0)">
        </el-input-number>
        <span>~</span>
        <el-input-number v-model="maxNum" controls-position="right" size="mini" placeholder='最大值' :min="0"
            @change="numChange(maxNum,1)">
        </el-input-number>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                minNum: undefined,
                maxNum: undefined,
                obj:{}
            }
        },
        props:{
            label:[Array,Number],
            comData: {
                type: Object,
                default: () => {}
            },
            classStyle:{
                type:String,
                default:''
            }
        },
        mounted(){
            //添加筛选条件确定时，默认带上此筛选条件，不管该筛选条件有没有赋值
            if(this.comData.dis){
                this.obj[this.label[0]] = ''
                this.obj[this.label[1]] = ''
            }else{
                this.obj[this.label] = ''
            }
            this.$emit('setFormData',this.obj)
        },
        methods:{
            numChange(num,payload){
                //非自定义字段后端接收类型 [planedNumberDown]: xxxx , [planedNumberUp]:xxxxx   自定义字段   id: "xxxx,xxxx"
                this.comData.dis ? this.obj[this.label[payload]] = num : this.obj[this.label] = this.minNum + ',' + this.maxNum
                console.log(this.obj,'obj')
                this.$emit('setFormData',this.obj)
            }
        },
    }
</script>

<style lang="less" scoped>
    .inputNumber {
        display: flex;

        span {
            flex: 2;
            text-align: center;
        }

        /deep/ .el-input-number.is-controls-right .el-input__inner{
            padding-left: 5px;
            padding-right: 30px;
        }

        /deep/ .el-input-number--mini {
            flex: 12;
        }
    }
    .inputNumber.dialog{
        width: 80%;
    }
</style>